<template>
  <div>
    我是Home组件
    <h1>主应用的数据 -> 姓名: {{ state.name }}, 数量: {{ state.count }}</h1>
    <el-button type="danger" @click="changeMainState">改变数据</el-button>
  </div>
</template>
<script>
import actions from "@/qiankun/actions"

export default {
  data() {
    return {
      state: {
        name: '',
        count: 0
      }
    }
  },
  mounted() {
    actions.onGlobalStateChange((currentState) => {
      this.state.name = currentState.name
      this.state.count = currentState.count
    }, true) // 这里的true表示初始化的时候，就执行一次，有点类似于vue中的watch
  },
  methods: {
    changeMainState() {
      // 使用initGlobalState提供的setGlobalState方法，来改变全局的数据
      actions.setGlobalState({
        name: "王武",
        count: this.state.count + 10
      })
    }
  }
}
</script>
<style scoped>

</style>